<script setup>
import { ref } from 'vue'
// const dialogVisible = ref(false)
const visibleDrawer = ref(false)

const defaultModel = ref({
  routeMileage: null,
  routeName: null,
  routeStatus: '',
  routeTags: [],
  spendTime: null,
  suitableTime: '',
  userId: null,
  alongScenicAreaVO: [],
  scenicAreaStart: '',
  scenicAreaEnd: '',
  alongElement: [],
  alongElementVO: [],
  alongScenicArea: [],
  routeInfo: '',
  routeImages: [],
  id: null,
  routeImage: []
})
const isShow = ref(true)

const formModel = ref({ ...defaultModel.value })
const open = (row) => {
  visibleDrawer.value = true
  formModel.value.routeImages = row.routeImage

  formModel.value = { ...formModel, ...row }
  if (!Array.isArray(formModel.value.routeTags)) {
    formModel.value.routeTags = []
  }
  if (
    row &&
    formModel.value.alongScenicAreaVO &&
    formModel.value.alongScenicAreaVO.length > 0
  ) {
    formModel.value.scenicAreaStart =
      formModel.value.alongScenicAreaVO[0].scenicAreaName
    formModel.value.scenicAreaEnd =
      formModel.value.alongScenicAreaVO[
        formModel.value.alongScenicAreaVO.length - 1
      ].scenicAreaName
  }
  if (
    formModel.value.alongElementVO &&
    formModel.value.alongElementVO.length > 0
  ) {
    isShow.value = true
  } else {
    isShow.value = false
  }
}
defineExpose({
  open
})
</script>
<template>
  <el-drawer
    v-model="visibleDrawer"
    title="路线详情"
    direction="rtl"
    size="50%"
  >
    <!-- 发表表单 -->
    <el-form :model="formModel" ref="formRef" label-width="100px">
      <el-form-item label="路线名称" prop="routeName">
        <el-input
          v-model="formModel.routeName"
          placeholder="请输入路线名称"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="线路起点" prop="scenicAreaStart">
        <el-input
          v-model="formModel.scenicAreaStart"
          placeholder="请输入路线起点"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="线路终点" prop="scenicAreaEnd">
        <el-input
          v-model="formModel.scenicAreaEnd"
          placeholder="请输入路线终点"
          :disabled="true"
        ></el-input>
      </el-form-item>

      <el-form-item label="沿途元素" prop="alongElementVO" v-if="isShow">
        <el-row :gutter="25">
          <el-col
            :span="8"
            v-for="(element, index) in formModel.alongElementVO"
            :key="index"
          >
            <el-input
              v-model="formModel.alongElementVO[index].elementName"
              placeholder="暂无元素"
              style="width: 170px; margin-right: 15px"
              :disabled="true"
            ></el-input>
          </el-col> </el-row
      ></el-form-item>

      <el-form-item label="沿途景区" prop="alongScenicAreaVO">
        <el-row :gutter="25">
          <el-col
            :span="12"
            v-for="(scenic, index) in formModel.alongScenicAreaVO"
            :key="index"
          >
            <el-input
              v-model="formModel.alongScenicAreaVO[index].scenicAreaName"
              placeholder="暂无景区"
              style="width: 170px; padding-right: 15px"
              :disabled="true"
            ></el-input>
          </el-col> </el-row
      ></el-form-item>
      <el-form-item label="线路标签" prop="routeTags">
        <el-row :gutter="25">
          <el-col
            :span="8"
            v-for="(tag, index) in formModel.routeTags"
            :key="index"
          >
            <el-input
              v-model="formModel.routeTags[index]"
              placeholder="添加标签"
              style="width: 170px; margin-right: 15px"
              :disabled="true"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form inline style="margin-left: 30px">
        <el-form-item label="适宜时间" style="padding-right: 20px">
          <el-input
            style="width: 300px"
            placeholder="请输入适宜时间"
            clearable
            v-model="formModel.suitableTime"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="花费时间时间">
          <el-input
            placeholder="请输入预计花费时间"
            clearable
            style="width: 300px"
            v-model="formModel.spendTime"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- <el-form-item label="景区图片" prop="scenicAreaImages">
        <el-upload
          class="avatar-uploader"
          :show-file-list="true"
          :file-list="fileList"
          list-type="picture-card"
          :auto-upload="false"
          :on-change="onSelectFile"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          ref="upload"
          :disabled="true"
          ><i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog v-model:visible="dialogVisible">
          <img width="100%" :src="imgUrl" alt="" />
        </el-dialog>
      </el-form-item> -->

      <el-form-item label="景区图片" prop="scenicAreaImage">
        <el-row :gutter="25">
          <el-col
            :span="10"
            v-for="(image, index) in formModel.routeImage"
            :key="index"
          >
            <img
              :src="image"
              alt="景区图片"
              style="width: 170px; height: auto; margin-right: 15px"
            />
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="路程里程">
        <el-input
          v-model="formModel.routeMileage"
          placeholder="请输入距离"
          :disabled="true"
        ></el-input>
      </el-form-item>

      <el-form-item label="景区介绍">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 5 }"
          placeholder="请输入内容"
          :disabled="true"
          v-model="formModel.routeInfo"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="visibleDrawer = false">确认</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<style lang="scss" scoped>
.text {
  font-size: 14px;
}
.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
